<template>
  <a-card title="还款配置" class="card">
    <a-form :colon="false" :form="form">
      <a-form-item
        label="自动扣款"
        :label-col="{ span: 24 }"
        :wrapper-col="{ span: 24 }"
      >
        <a-row type="flex" align-items="center">
          <a-col :span="2">
            <a-form-item label="每" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" :required="false">
              <a-input
                :disabled="hasFormEdit"
                v-decorator="[
                  'interval',
                  {
                    initialValue: deduction.interval,
                    rules: [{ required: true, message: '必填' }]
                  },
                ]"
                placeholder="必填"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="天" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" :required="false">
              <a-time-picker
                :disabled="hasFormEdit"
                style="width: 100%"
                v-decorator="[
                  'timer',
                  {
                    initialValue: deduction.timer,
                    rules: [{ required: true, message: '必填' }]
                  },
                ]"
                placeholder="必填"
                format="HH:mm"
                value-format="HH:mm"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="执行" :label-col="{ span: 6 }" :wrapper-col="{ span: 21 }" :required="false" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item v-auth="'modify_repayment_method'">
        <a-button type="primary" @click.prevent="handleSubmit" :loading="loading" v-if="isEdit">
          提 交
        </a-button>
        <a-button v-else @click="isEdit = true">
          编辑
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { getDeduction, modifyDeduction } from '@/api/risk/admin'
import props from './props'

export default {
  mixins: [props],

  data () {
    return {
      checkNick: false,
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),

      // 自动扣款
      deduction: {},

      loading: false,

      isEdit: false,
    }
  },

  computed: {
    hasFormEdit () {
      return !this.isEdit
    },
  },

  created () {
    this.getDeductiont()
  },

  methods: {
    // 还款配置
    getDeductiont () {
      return new Promise((resolve, reject) => {
        getDeduction()
          .then((data) => {
            this.deduction = data
            console.log(data, 'dadadad')
            resolve(data)
          })
          .catch(error => {
            reject(error)
          })
      })
    },

    handleSubmit () {
      this.loading = true

      this.validateFieldsForm()
        .then(() => {
          this.submitForm()
            .then((res) => {
              this.getDeductiont()
              this.$notification.success({
                message: '修改成功!',
                duration: 1,
              })

              this.isEdit = false

              this.$emit('updated')
            })
            .finally(() => {
              this.loading = false
            })
        })
        .catch(() => {
          this.loading = false
        })
    },

    // 提交表单
    submitForm () {
      const validateFieldsKey = ['interval', 'timer']

      return new Promise((resolve, reject) => {
        const data = this.form.getFieldsValue(validateFieldsKey)

        modifyDeduction(data)
          .then((data) => {
            resolve(data)
          })
          .catch((error) => {
            reject(error)
          })
      })
    },

     // form validateFields
    validateFieldsForm () {
      return new Promise((resolve, reject) => {
        const {
          form: { validateFieldsAndScroll },
        } = this

        validateFieldsAndScroll((err, values) => {
          if (!err) {
            resolve()
            return false
          }
          reject(false)
        })
      })
    },
  },
}
</script>

<style lang="scss">
// .product-settings-container  {
//   .ant-input-suffix,.ant-input-prefix {
//     color: rgba(0, 0, 0, 0.5);
//   }
// }
</style>
